<template>
    <div class="page">
        <div class="flex-row flex-item">
            <tz-filter @change="filterChange" :filter-data="filterData">
                <template v-slot:default="scope">
                    <el-input :maxlength="100" size="small" class="table-filter-item" v-model.trim="scope.data.ip" clearable placeholder="ip地址"></el-input>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <div class="flex1"></div>
            <el-button style="margin-left: 10px;"
                       type="primary"
                       @click="addFireWall"
                       size="small">新增防火墙</el-button>
        </div>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                :data="loadData">
            <el-table-column
                    prop="ip"
                    show-overflow-tooltip
                    label="ip地址">
                <template slot-scope="scope">
                    <high-light :value="scope.row.ip" :keyword="filterData.ip"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sourceIp"
                    show-overflow-tooltip
                    label="原始IP">
            </el-table-column>
            <el-table-column
                    prop="groupName"
                    show-overflow-tooltip
                    label="单位">
            </el-table-column>
            <el-table-column
                    prop="city"
                    show-overflow-tooltip
                    label="城市">
            </el-table-column>
            <el-table-column
                    prop="syncTime"
                    show-overflow-tooltip
                    label="同步时间"
                    :formatter="(row) => {
                        return row.syncTime ? moment(row.syncTime).format('YYYY-MM-DD HH:mm:ss') : '-'
                    }">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="创建时间"
                    :formatter="(row) => {
                        return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                    }">
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="name"-->
<!--                    show-overflow-tooltip-->
<!--                    width="400"-->
<!--                    label="设备名称">-->
<!--                <template slot-scope="scope">-->
<!--                    <high-light :value="scope.row.name" :keyword="filterData.name"></high-light>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                    prop="code"-->
<!--                    show-overflow-tooltip-->
<!--                    label="code">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                    prop="deviceTypeFullName"-->
<!--                    show-overflow-tooltip-->
<!--                    label="分类名称">-->
<!--            </el-table-column>-->
            <el-table-column
                    prop="operate"
                    show-overflow-tooltip
                    label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="text" @click="deleteItem(scope.row)">删除</el-button>
                    <el-button @click="editItem(scope.row)" size="small" type="text">编辑</el-button>
                    <el-button @click="updateItem(scope.row)" size="small" type="text">同步</el-button>
                </template>
            </el-table-column>
        </tz-table>
        <el-drawer
                title="管理防火墙"
                :visible.sync="drawer"
                direction="rtl">
            <div class="drawer-content" v-loading="loading">
                <el-form v-if="drawer" :model="fireWallInfo" ref="deviceForm" :rules="rules" label-width="80px">
                    <el-form-item label="网络选择" prop="network">
                        <el-radio-group v-model="fireWallInfo.network" size="small" class="left-btn">
                            <el-radio-button v-for="item in networks" :label="item.value" :key="item.value">{{ item.label }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="ip地址" prop="ip">
                        <el-input :maxlength="100" show-word-limit v-model="fireWallInfo.ip"></el-input>
                    </el-form-item>
                    <el-form-item label="原始IP" prop="sourceIp">
                        <el-input :maxlength="100" show-word-limit v-model="fireWallInfo.sourceIp"></el-input>
                    </el-form-item>
                    <el-form-item label="城市" prop="city">
                        <el-input :maxlength="100" show-word-limit v-model="fireWallInfo.city"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="groupName">
                        <el-select style="width: 100%" v-model="fireWallInfo.groupName"
                                   placeholder="请选择单位">
                            <el-option v-for="item in allGroupsList"
                                       :key="item.groupId"
                                       :label="item.groupName"
                                       :value="item.groupName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="flex-item flex-row">
                            <div class="flex1"></div>
                            <el-button size="small" @click="drawer = false">取消</el-button>
                            <el-button size="small" type="primary" @click="saveOrUpdateFireWall">保存</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import moment from 'moment'
import {mapState} from 'vuex'
import { networks } from '@/assets/dict'

export default {
  name: 'firewallAdmin',
  data() {
    return {
      moment,
      networks,
      filterData: {
        city: '',
        network: 'JZW',
        ip: ''
      },
      fireWallInfo: {
        ip: '',
        network: '',
        city: '',
        sourceIp: ''
      },
      loading: false,
      drawer: false,
      rules: {
        network: [
          { required: true, message: '请选择网系', trigger: 'blur' }
        ],
        ip: [
          { required: true, message: '请输入ip地址', trigger: 'change' }
        ],
        city: [
          { required: true, message: '请输入城市名称', trigger: 'change' }
        ],
        sourceIp: [
          { required: false, message: '请输入原始IP', trigger: 'change' }
        ],
        groupName: [
          { required: true, message: '请选择所属单位', trigger: 'change' }
        ]
      },
      allGroupsList: [],
      isEq: 0
    }
  },
  methods: {
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    addFireWall() {
      this.drawer = true
      this.fireWallInfo = {
        ip: '',
        network: this.filterData.network,
        city: ''
      }
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    loadData(page) {
      const { network, ip } = this.filterData
      const params = {...page, network, ip, isEq: this.isEq}
      return this.$http.get('/topu/fireProtectList', {
        params
      }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表失败')
      })
    },
    editItem(item) {
      this.fireWallInfo = {...item}
      this.drawer = true
    },
    updateItem({jobId}) {
      this.loading = true
      this.$http.post('/sys/schedule/run', {
        jobId
      }).then(() => {
        this.$TZmessage.success('操作成功')
        this.refresh()
      }).catch(err => {
        this.$TZmessage.error(err.msg || '操作失败')
      }).finally(() => {
        this.loading = false
      })
    },
    deleteItem(row) {
      this.$confirm('是否删除当前数据').then(() => {
        this.loading = true
        this.$http.delete('/topu/deletedFireProtect', {
          params: {
            id: row.id
          }
        }).then(() => {
          this.$TZmessage.success('删除成功')
          this.refresh()
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        console.log('取消执行')
      })
    },
    saveOrUpdateFireWall() {
      this.$refs.deviceForm.validate((valid) => {
        if (!valid) {return}
        this.loading = true
        // this.$http.post(this.fireWallInfo.id ? '/topu/updateFireProtect' : '/topu/addFireProtect', this.fireWallInfo).then(res => {
        this.$http.post(this.fireWallInfo.id ? '/topu/updateFireProtect' : '/topu/addFireProtect', this.fireWallInfo).then(() => {
          this.refresh()
          this.drawer = false
        }).catch(err => {
          this.$TZmessage.error(err.msg || '编辑设备失败')
        }).finally(() => {
          this.loading = false
        })
      })
    },
    getGroups() {
      this.$http.get('/sys/user/getGroupList').then(res => {
        this.allGroupsList = res || []
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取用户组失败')
      })
    }
  },
  mounted() {
    this.getGroups()
  },
  computed: {
    ...mapState('dict', ['deviceTypeList', 'deviceTypeMap']),
  }
}
</script>

<style lang="scss" scoped>
    .drawer-content {
        padding: 20px;
    }
</style>